<template>
	<view>
		<!-- 头部 -->
		<view class="bgc">
		</view>
		<view class="header">
			<view class="area">
				<!-- 选择地区 -->
				<wangding-pickerAddress @change='change'>{{txt}}</wangding-pickerAddress>
			</view>
			<my-search>
			</my-search>
		</view>
		<!-- 轮播 -->
		<view class="swiper">
			<swiper :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image class="swipe-image" src="http://rsoya41a8.hn-bkt.clouddn.com/1.png?e=1680780881&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:4dtEI2WrBgHiRfP3cYcZJRkomo0=">
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="cate">
			<navigator class="cate-item" url="../../subpkg1/yuesao/yuesao" hover-class="none">
				<image src="../../static/home/people.png" mode=""></image>
				<text>优选月嫂</text>
			</navigator>
			<navigator class="cate-item" url="../loan/loan" open-type="switchTab" hover-class="none">
				<image src="../../static/home/car.png" mode=""></image>
				<text>母婴购</text>
			</navigator>
			<navigator class="cate-item" url="../../subpkg1/Butie/Butie" hover-class="none">
				<image src="../../static/home/money1.png" mode=""></image>
				<text>孕婴补贴</text>
			</navigator>
			<navigator class="cate-item" url="../../subpkg1/community/community" hover-class="none">
				<image src="../../static/home/message.png" mode=""></image>
				<text>交流论坛</text>
			</navigator>
		</view>
		<!-- 优选活动1 -->
		<view class="two-pics">
			<view class="header1">
				<text>优选活动</text>
				<text>查看更多</text>
			</view>
			<view class="content1">
				<navigator class="pic-item" url="../../subpkg1/yuesao/yuesao" hover-class="none">
						<view class="mask">
							<text>金牌月嫂</text>
						</view>
						<text class="bigword">优惠方便</text>
						<text class="smallword" style="z-index: 2;">减轻妈妈的育儿负担</text>
						<image src="http://rsoya41a8.hn-bkt.clouddn.com/%E6%9C%88%E5%AB%82.png?e=1680781072&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:oT292ZhHHPLDbhvGul-_CxNVk1k=" mode=""></image>
					</navigator>
					<navigator class="pic-item" url="../loan/loan" open-type="switchTab" hover-class="none">
					<view class="mask">
						<text>活动专区</text>
					</view>
					<text class="bigword">超级特惠</text>
					<text class="smallword">精选优惠专场</text>
					<image src="http://rsoya41a8.hn-bkt.clouddn.com/%E5%A5%B6%E7%B2%89.png?e=1680780436&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:Z0gb71ekHTdGAjJ7Sf35kTf_XKQ=" mode=""></image>
					</navigator>
			</view>
		</view>
		<!-- 活动2 -->
		<view class="today-focus">
			<view class="header1">
				<text>优选活动</text>
				<text>查看更多</text>
			</view>
			<view class="focus-content">
				<view class="focus-item focus-item-left">
					<text>初诊</text>
					<text>11-02 周三</text>
					<text>孕5-7周</text>
					<image src="http://rsoya41a8.hn-bkt.clouddn.com/%E5%90%AC%E8%AF%8A%E5%99%A8.png?e=1680780953&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:CA92SygdWkb-nhKOoG9YoziiWio=" mode=""></image>
				</view>
				<view class="focus-item-right">
					<view class="focus-item">
						<text>孕妈保险</text>
						<text>准妈妈必备 防早产</text>
						<image src="http://rsoya41a8.hn-bkt.clouddn.com/%E4%BA%BA%E7%89%A9%EF%BC%8C%E8%A5%BF%E8%A3%854.png?e=1680780972&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:Q0Bm2R5Y_kADqyrYCObAkh_oc0k=" mode=""></image>
					</view>
					<view class="focus-item">
						<text>宝宝起名</text>
						<text>获得给孩子起名的灵感</text>
						<image src="http://rsoya41a8.hn-bkt.clouddn.com/yijiaren.png?e=1680780994&token=OfzeK_c_G9xD3hAyEF9TFWRNeCLjinC7Hp6-e7la:MkiMdZq6EZKnjQDW9zwgBER3-lE=" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				txt: '广州市',
				baseUrl: 'http://127.0.0.1:8080/image/'
			};
		},
		methods: {
			change(data) {
				this.txt = data.data[2]
			}
		},
		onShareAppMessage:function() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.bgc {
		width: 100%;
		height: 180px;
		// position: fixed;
		// top: 0;
		// left: 0;
		z-index: -1;
		border-bottom-left-radius: 20% 10%;
		border-bottom-right-radius: 20% 10%;
		background: linear-gradient(#f08988, #ff8583);
	}

	.header {
		height: 40px;
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 10px 10px 0 0px;
		margin-top: -140px;

		.area {
			text-align: center;
			line-height: 38px;
			color: white;
		}
	}

	.swiper {
		width: 100%;
		height: 130px;
		margin-top: 10px;

		.swiper-item {
			margin: auto;
		}

		.swipe-image {
			display: block;
			text-align: center;
			width: 90%;
			margin: 0 auto;
			height: 150px;
			border-radius: 15px;
		}
	}

	.cate {
		height: 60px;
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 35px;

		.cate-item {
			width: 20%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 30px;
				height: 30px;
			}

			text {
				margin-top: 5px;
			}
		}
	}

	.header1 {
		display: flex;
		justify-content: space-between;
		height: 20px;
		width: 100%;
		font-weight: 500;
		margin-top: 30px;

		text:nth-child(1) {
			font-size: 18px;
			color: black;
			padding-left: 20px;
			line-height: 20px;
		}

		text:nth-child(2) {
			font-size: 15px;
			color: #cccccc;
			padding-right: 20px;
			line-height: 20px;
		}
	}

	.two-pics {
		height: 110px;
		width: 100%;
		margin-top: 10px;

		.content1 {
			margin-top: 5px;
			height: 90%;
			width: 100%;
			display: flex;
			justify-content: space-around;
			position: relative;

			.pic-item {
				display: flex;
				flex-direction: column;
				margin-top: 10px;
				height: 100%;
				width: 45%;
				background-color: #f8f7f3;
				position: relative;

				.bigword {
					font-weight: 500;
					font-size: 17px;
					transform: translateY(40px) translateX(5px);
					padding-left: 5px;
				}

				.smallword {
					font-size: 12px;
					transform: translateY(45px) translateX(5px);
					color: #a4a4a4;
					padding-left: 5px;
				}

				.mask {
					height: 0;
					width: 50px;
					border-top: 20px solid #f57171;
					border-right: 12px solid transparent;
					position: absolute;
					top: 0;
					left: 0;

					text {
						position: absolute;
						top: -18px;
						left: 5px;
						color: white;
						font-size: 11px;
					}
				}

				image {
					width: 80px;
					height: 80px;
					position: absolute;
					right: -5px;
					top: 12%;
					transform: rotateY(180deg);
				}
			}
		}
	}

	.today-focus {
		margin-top: 45px;

		.focus-content {
			display: flex;
			width: 90%;
			justify-content: center;
			height: 230px;
			margin: 15px auto;

			.focus-item {
				border: 1px solid transparent;
				border-radius: 5px;
				background-color: #f8f7f3;
				position: relative;

				text:nth-child(1) {
					position: absolute;
					top: 40%;
					left: 5px;
					font-size: 15px;
					padding-left: 5px;
				}

				text:nth-child(2) {
					position: absolute;
					top: 70%;
					left: 5px;
					font-size: 12px;
					color: #a4a4a4;
					padding-left: 5px;
				}

				text:nth-child(3) {
					position: absolute;
					top: 53%;
					left: 5px;
					font-size: 15px;
					padding-left: 5px;
				}

				image {
					width: 85px;
					height: 85px;
					position: absolute;
					top: 20px;
					right: 10px;
					transform: rotateY(180deg);
				}
			}

			.focus-item-right {
				width: 60%;
				height: 90%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 15px;

				.focus-item {
					height: 45%;
					width: 100%;

					text:nth-child(2) {
						top: 63%;
					}

					image {
						top: 10%;
						right: 0;
						width: 63px;
						height: 65px;
					}
				}
			}

			.focus-item-left {
				width: 40%;
				height: 95%;
			}
		}
	}
</style>
